<template>
  <view class="container page-content">
    <!-- 默认样式的tabbar -->
    <tabbar title="默认样式" @back="handleBack"></tabbar>

    <!-- 自定义颜色的tabbar -->
    <view class="mt-40">
      <tabbar 
        title="自定义颜色"
        bgColor="#007AFF"
        textColor="text-white"
        @back="handleBack"
      ></tabbar>
    </view>

    <!-- 自定义文本的tabbar -->
    <view class="mt-40">
      <tabbar 
        title="账号资料"
        backText="返回主页"
        @back="handleBack"
      ></tabbar>
    </view>

    <!-- 不显示返回按钮的tabbar -->
    <view class="mt-40">
      <tabbar 
        title="无返回按钮"
        showBack="false"
      ></tabbar>
    </view>

    <view class="content mt-40">
      <text>页面内容区域</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Tabbar from '@/components/tabbar.vue';

// 返回按钮点击事件处理
const handleBack = () => {
  uni.showToast({
    title: '返回按钮被点击',
    icon: 'none'
  });
  // 实际应用中可以使用uni.navigateBack()返回上一页
  // uni.navigateBack();
};
</script>

<style lang="scss">
.container {
  padding: 20rpx;
}

.mt-40 {
  margin-top: 40rpx;
}

.content {
  margin-top: 100rpx;
  text-align: center;
}
</style>